<template>
	<view class="container">
		<view class="forms">
			<view class="form-item">
				<text>选择雪场</text>
				<hpy-form-select v-model="formData.mealSnowId" :dataList="xuechang" text="snowField" name="id"
					title="请选择雪场" @change="changeXueChang" />
			</view>
			<view class="form-item">
				<text>选择套餐</text>
				<hpy-form-select v-model="formData.setMealShootId" :dataList="taocan" text="setMealName" name="id" @change="changeTaocan"
					title="请选择套餐" />
			</view>
			<view class="form-item">
				<text>手机号</text>
				<input class="input" v-model="formData.userContactTelephone" type="text" placeholder="请输入手机号" @blur="blurPhone">
			</view>

			<view class="form-time">
				<text>预约时间</text>
				<image src="/static/images/time.png" mode=""></image>
				<text>{{ datas }}</text>
			</view>
			<uni-calendar :start-date="startDate" :end-date="endDate" :showMonth="false" @change="change" />
		</view>
		<view class="btn" @click="confirm">确定订单</view>
		<view class="remark">
			<view class="">注意事项：</view>
			<view class="">1、下单后半小时内我们会安排摄影师与您取得联系，请保证填写的手机号正确；</view>
			<view class="">2、约拍完成后可在约拍订单中心选择素材生成视频，无需再次支付费用；</view>
		</view>
	</view>
</template>

<script>
	import {
		snowFieldList,
	} from '@/api/index.js'
	import {
		AddShoot,
		getShootTC,
	} from '@/api/yuepai.js'
	import {
		getUserData
	} from '@/utils/storage.js' // 缓存内容，用于查找缓存里的东西

	export default {
		data() {
			return {
				// 雪场列表
				xuechang: [],
				// 套餐列表
				taocan: [],
				// 参数
				formData: {
					mealSnowId: '', // 雪场id
					mealSnowName:'', // 雪场名称，提交的时候带一下
					setMealShootId: '', //套餐id
					userContactTelephone: getUserData().mobile, //手机号
					reservationTime: '', // 预约时间
					memberId:getUserData().id, // 用户的ID
					price:0, // 套餐价格
					duration:0,
					userDescription:'来个小哥哥可以一起滑雪的',
					description:''
				},
				datas:'', // 这个时间只展示
				// "describe": "string",
				// "userDescription": "string"
				// 开始时间
				startDate: '',
				// 结束时间
				endDate: '',
				setMealName:'', // 存放选了什么套餐
			}
		},
		onLoad() {
			this.getSkiing()
			this.setTimeRange()
			
		},
		methods: {
			changeTaocan(e){
				this.formData.description = e.data.description // 描述
				this.formData.duration = e.data.duration // 视频时长
				this.formData.price = e.data.price // 套餐价格
				this.setMealName = e.data.setMealName
			},
			// 获取雪场列表
			getSkiing() {
				snowFieldList().then(res => {
					if(res){
						this.xuechang = res.data
						this.getSetMeal()
					}
				})
			},
			// 选中雪场
			changeXueChang(e) {
				this.formData.mealSnowName = e.data.snowField
				console.log(this.formData)
			},
			// 获取套餐列表
			getSetMeal() {
				getShootTC().then(res => {
					console.log(res)
					this.taocan = res.data
				})
			},

			// 验证手机号
			blurPhone(e) {
				let Reg = /^0?(13[0-9]|14[0-9]|15[0-9]|16[0-9]|17[0-9]|18[0-9]|19[0-9])[0-9]{8}$/
				if (!Reg.test(e.detail.value)) {
					uni.showToast({
						title: '请输入正确的11位手机号',
						icon: 'none'
					})
					this.formData.userContactTelephone = ''
					return
				}
			},

			// 预约时间可选范围
			setTimeRange() {
				this.datas = this.getDate(new Date()).fullDate
				this.startDate = this.getDate(new Date()).fullDate;
				this.endDate = this.getDate(new Date(), 14).fullDate;
			},

			/** * 获取任意时间 */
			getDate(date, AddDayCount = 0) {
				if (!date) {
					date = new Date();
				}
				if (typeof date !== 'object') {
					date = date.replace(/-/g, '/');
				}
				const dd = new Date(date);
				dd.setDate(dd.getDate() + AddDayCount); // 获取AddDayCount天后的日期
				const y = dd.getFullYear();
				const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1; // 获取当前月份的日期，不足10补0
				const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate(); // 获取当前几号，不足10补0
				return {
					fullDate: y + '-' + m + '-' + d,
					year: y,
					month: m,
					date: d,
					day: dd.getDay()
				};
			},

			// 选择预约时间
			change(e) {
				console.log(e)
				this.datas = e.fulldate
				// const newData = new Date(e.fulldate)
				this.formData.reservationTime = e.fulldate + ' 00:00:00'
				// e.fulldate.toUTCString()
			},

			// 确定订单
			confirm() {
				if(this.formData.reservationTime == ""){
					this.formData.reservationTime = this.datas + ' 00:00:00'
				}
				if (this.formData.mealSnowId == "") {
					uni.showToast({
						title: '请选择雪场',
						icon: 'none'
					})
					return
				}
				if (this.formData.setMealShootId == "") {
					uni.showToast({
						title: '请选择套餐',
						icon: 'none'
					})
					return
				}
				if (this.formData.userContactTelephone == "") {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					})
					return
				}
				AddShoot(this.formData).then(res =>{
					if (res.code == 200) {
						uni.navigateTo({
							url: `/pages/order/components/payment?orderMeal = `+ this.setMealName +`&orderInfo=` + encodeURIComponent(JSON.stringify(res.data))
						})
					} else {
						this.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
					console.log(res)
				})
				console.log('this.fromData---------: ', this.formData)
			},

		}
	}
</script>

<style lang="less" scoped>
	/deep/ .select-picker-border {
		border: none !important;
	}

	/deep/ .select-picker-arrow-area {
		transform: rotate(-140deg) !important;
	}

	.container {
		padding: 30rpx 30rpx;
		box-sizing: border-box;
		background-color: #f2f6f9;
		background-image: url('https://jywc.com.cn/profile/applet/images/20231030084803.png');
		background-size: 100% 100%;
		background-position: top center;
		background-repeat: no-repeat;
	}

	.forms {
		width: 690rpx;
		padding: 20rpx 20rpx;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 8rpx;
		box-sizing: border-box;

		.form-item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0 20rpx 0;
			margin-bottom: 16rpx;
			border-bottom: 1px solid #f1f1f1;
			font-size: 28rpx;
			color: #333;

			.input {
				text-align: right;
			}
		}

		.form-time {
			padding: 20rpx 20rpx;
			box-sizing: border-box;
			border-radius: 8rpx;
			background: rgba(0, 133, 255, 1);
			font-size: 28rpx;
			color: #fff;
			display: flex;
			align-items: center;
			justify-content: space-between;

			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}

	.btn {
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: rgba(0, 133, 255, 1);
		font-size: 30rpx;
		color: #fff;
		text-align: center;
	}

	.remark {
		margin: 20rpx 0;
		font-size: 28rpx;
		color: #333;

		>view {
			line-height: 1.8;
		}
	}
</style>